<template>
  <div class="qsslect-container">
<el-form :model="questionForm" :rules="rules" ref="questionForm" label-width="100px" class="demo-questionForm">
  <el-form-item label="分类" required  style="display: inline-block; width: 20%;" class="question-types select">
    <el-col :span="5" class="question">
      <el-form-item>
        <el-select v-model="questionForm.classify" placeholder="请选择题型" @change="classifyChange">
            <el-option label="单选题" value="1" check></el-option>
            <el-option label="多选题" value="2"></el-option>
            <el-option label="主观题" value="3"></el-option>
        </el-select>
      </el-form-item>
    </el-col>
  </el-form-item>
  <el-form-item label="题型" required  style="display: inline-block; width: 20%;" class="question-types select">
    <el-col :span="5" class="question">
      <el-form-item>
        <el-select v-model="questionForm.classify" placeholder="请选择题型" @change="classifyChange">
            <el-option label="单选题" value="1" check></el-option>
            <el-option label="多选题" value="2"></el-option>
            <el-option label="主观题" value="3"></el-option>
        </el-select>
      </el-form-item>
    </el-col>
  </el-form-item>
  <el-form-item label="标签"  style="display: inline-block; width: 20%; margin-left: -30px;" class="question-types">
    <el-col :span="5" class="tag">
      <el-form-item prop="">
        <el-input></el-input>
      </el-form-item>
    </el-col>
  </el-form-item>
  <el-form-item label="关键词"  style="display: inline-block; width: 20%; margin-left: -20px;" class="question-types">
    <el-col :span="5" class="tag">
      <el-form-item prop="">
        <el-input></el-input>
      </el-form-item>
    </el-col>
  </el-form-item>
    <el-button type="primary" class="search" @click="submitForm('questionForm','0')" :loading="btnLoading">查询</el-button>
</el-form>
<div class="table">
    <div>
        <el-checkbox></el-checkbox>
        全选
        <span>共20道</span>
        每页显示&nbsp;&nbsp;
        <el-select v-model="value" placeholder="10">
        <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
        </el-option>
        </el-select>
    </div>  
    <el-container>
        <el-main>
            <el-table
                v-loading="tableLoading"
                element-loading-text="请给我点时间！"
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">                
                <el-table-column prop="id" type="selection" width="55"></el-table-column>
                <el-table-column type="index" label="序号" width="100"></el-table-column>
                <el-table-column prop="typeName" label="题目" width="630"></el-table-column>
                <el-table-column prop="question" label="题型" show-overflow-tooltipb width="100"></el-table-column>
                <el-table-column prop="classify" label="分类" width="100"></el-table-column>
                <!-- <el-table-column prop="examType.typeName" label="分类" width="100"></el-table-column> -->
            </el-table>
                </el-main>  
            </el-container>
            <div class="page">
            <el-button size="mini">首页</el-button>
            <el-pagination
            background
            layout="prev, pager, next"
            :total="1000"
            >
            </el-pagination>
            <el-button size="mini">末页</el-button>
            <div class="save">
                <el-button type="primary" class="search" @click="submitForm('questionForm','0')" :loading="btnLoading" size="medium">保存</el-button>
            </div>
            </div>
    </div>
  </div>
</template>
<script>
import { fetchTree, fetchDel, fetchAdd } from "@/api/profession";
import { fetchList, fetchQuestionDel } from "@/api/question";
import { isvalidateRequired } from "@/utils/validate";
import { Message } from "element-ui";
export default {
  data() {
    return {
      questionForm: {
        id: "",
        typeList: [],
        classify: "1",
        question: ""
      },
      tableData: [
        {
          question: "2016-05-03",
          classify: "王小虎",
          typeName: "上海市普陀区金沙江路 1518 弄"
        },
        {
          question: "2016-05-02",
          classify: "王小虎",
          typeName: "上海市普陀区金沙江路 1518 弄"
        },
        {
          question: "2016-05-04",
          classify: "王小虎",
          typeName: "上海市普陀区金沙江路 1518 弄"
        },
        {
          question: "2016-05-01",
          classify: "王小虎",
          typeName: "上海市普陀区金沙江路 1518 弄"
        },
        {
          question: "2016-05-08",
          classify: "王小虎",
          typeName: "上海市普陀区金沙江路 1518 弄"
        },
        {
          question: "2016-05-06",
          classify: "王小虎",
          typeName: "上海市普陀区金沙江路 1518 弄"
        },
        {
          question: "2016-05-07",
          classify: "王小虎",
          typeName: "上海市普陀区金沙江路 1518 弄"
        }
      ]
    };
  },
  created() {
    // this.getQuestionList()
  },
  methods: {
    getQuestionList() {
      this.tableLoading = true;
      this.$emit("create"); // for test
      fetchList(
        this.treeId,
        this.currentPage,
        this.pageSize,
        this.title
      ).then(response => {
        this.pageTotal = response.data.total;
        this.tableData = response.data.data;
        this.tableLoading = false;
      });
    }
  }
};
</script>
<style scoped>
.qsslect-container .el-form {
    text-align: left;
}
.question-types>>>.el-form-item__label {
  width: 60px !important;
}
.question-types>>>.el-form-item__content {
  margin-left: 0px !important;
}
.question,
.tag {
  width: 60%;
}
.search {
  vertical-align: top;
}
.table>div {
 text-align: left;
 line-height: 24px;
 margin-top: -20px;
}
.table .el-checkbox {
    padding: 0 14px;
}
.table span {
    margin: 0 30px;
}
.table>>>.el-select>.el-input{
    width: 80px;
}
.el-main {
  color: #333;
  text-align: left;
  border-bottom: 0;
  padding: 0;
}
.table .page {
 margin-top: 20px;
 text-align: center;
}
.el-pagination {
    display: inline-block;
}
.save {
 margin-top: 20px; 
}
.save .search {
 width: 120px;
}
</style>
